<template>
    <div class="container">
      <!-- 课程页面 按钮部分 -->
      <div class="handle-box">
        <el-button-group class="ml-4">
          <el-button color="#0eb394" @click="addCourse">添加课程</el-button>
        </el-button-group>
      </div>
      <el-divider></el-divider>
  
      <!-- 课程列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="课程名" />
        <el-table-column prop="duration" label="时长（分钟）" />
        <el-table-column prop="contains" label="上课容量人数" />
        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-row class="btn-opt">
              <el-button type="primary" size="small" @click="editCourse(scope.row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="deleteCourse(scope.row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
  
      <el-divider></el-divider>
  
      <!-- 分页组件 -->
      <el-row>
        <el-col :span="20">
          <el-pagination
            v-model:current-page="pageData.pageCurrent"
            :page-size="pageData.pageSize"
            layout="prev, pager, next"
            :total="pageData.pageTotal"
            background
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
  
      <!-- 添加课程的抽屉 -->
      <el-drawer v-model="drawer" :direction="direction" size="50%">
        <template #header>
          <h2>{{ form.id ? '编辑课程' : '添加课程' }}</h2>
        </template>
        <div class="div-form">
          <!-- 添加/编辑课程的表单 -->
          <el-form :model="form">
            <el-form-item label="课程名" required>
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="时长（分钟）" required>
              <el-input v-model="form.duration" type="number" />
            </el-form-item>
            <el-form-item label="上课容量人数" required>
              <el-input v-model="form.contains" type="number" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { getCourses, deleteCourseById, saveOrUpdateCourse } from '@/api/course';
  import { ElMessage, ElMessageBox } from 'element-plus';
  
  const originalData = ref([]);
  const pageData = reactive({
    pageCurrent: 1,
    pageSize: 3,
    pageTotal: 0,
  });
  
  const tableData = ref([]);
  
  onMounted(() => {
    loadCourses();
  });
  
  // 加载课程数据
  const loadCourses = () => {
    getCourses().then(res => {
      originalData.value = res.data.data;
      pageData.pageTotal = originalData.value.length;
      updateTableData();
    });
  };
  
  // 更新表格数据的函数
  const updateTableData = () => {
    const start = (pageData.pageCurrent - 1) * pageData.pageSize;
    const end = start + pageData.pageSize;
    tableData.value = originalData.value.slice(start, end);
  };
  
  // 分页处理
  const handleCurrentChange = (val) => {
    pageData.pageCurrent = val;
    updateTableData();
  };
  
  // 添加/编辑课程的逻辑
  const drawer = ref(false);
  const direction = ref('rtl');
  const form = reactive({
    id: null,
    name: '',
    duration: '',
    contains: '',
  });
  
  const addCourse = () => {
    drawer.value = true;
    Object.assign(form, {
      id: null,
      name: '',
      duration: '',
      contains: '',
    });
  };
  
  const editCourse = (id) => {
    const course = originalData.value.find(course => course.id === id);
    if (course) {
      Object.assign(form, course);
      console.log(course);
      drawer.value = true;
    }
  };
  
  const submitForm = () => {
    saveOrUpdateCourse(form).then(() => {
      loadCourses(); // 重新加载课程数据
      drawer.value = false;
    });
  };
  
  // 删除课程的逻辑
  const deleteCourse = (id) => {
    ElMessageBox.confirm('确定要删除此课程吗?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      deleteCourseById(id).then(() => {
        loadCourses(); // 重新加载课程数据
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
      });
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      });
    });
  };
  </script>
  
  <style lang="less" scoped>
  .handle-box {
    margin-bottom: 20px;
  }
  
  .btn-opt {
    font-size: 13px;
    .el-button {
      margin-left: 3px;
      font-size: 13px;
      padding: 1px 6px;
    }
  }
  
  .div-form {
    text-align: center;
    width: 90%;
    margin-left: 20px;
  }
  </style>
  